<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" /> 
	<title>React State</title>
	<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
	<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
	<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

	<div id="example"></div>

	<script type="text/babel">
        class Demo extends React.Component {
            // 添加类型限制
            // static propTpyes = {
            //     name: PropTpyes.string.isRequired,
            //     age: PropTpyes.string
            // }
            render() {
                const {name, sex, age} = this.props;
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>年龄：{age+1}</li>
                        <li>性别：{sex}</li>
                    </ul>
                );
            }
        }

        /*
          进行类型限制，默认值限制，可以引入一个static的prop-types.js
          当然，这是给类本身加属性，非实例本身，可以移动到类中，使用static
        */
        // Demo.propTpyes = {
        //     name: PropTpyes.string.isRequired,
        //     age: PropTpyes.string
        // }

        // Demo.defaultProps = {
        //     sex: '男'
        // }
        
		ReactDOM.render(<Demo name="shujun" age="33" sex="man" />, 
        document.getElementById('example'));
	</script>

</body>

</html>